<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<style type="text/css">
    #myCanvas{border:dashed 2px #CCC}
</style>
<?php 
	error_reporting(0);
	$link = mysql_connect('localhost','root','root');


	               
?>
<script type="text/javascript">


	function diydrawLine(){
	
		var diyLine = new Array(11);
		for(var d=1;d<13;d++){
			var f=d-1;
			if(document.getElementById("number"+d).value == ""){
				alert("您的第"+d+"个数据不能为空或其他不合法的数据！");
				break;
				}
			if(document.getElementById("number"+d).value>300 || document.getElementById("number"+d).value<0){
				alert("您的第"+d+"个数据超出范围！");
				break;
				}
			else{
			diyLine[f]=document.getElementById("number"+d).value;
			document.getElementById("sj"+d).value=diyLine[f];
			//diyLine[f]=document.getElementById("sj"+d).value;
				}
			}
			
		
				
		
		/*
		diy[2]=document.getElementById("number3").value;
		diy[3]=document.getElementById("number4").value;
		diy[4]=document.getElementById("number5").value;
		diy[5]=document.getElementById("number6").value;
		diy[6]=document.getElementById("number7").value;
		diy[7]=document.getElementById("number8").value;
		diy[8]=document.getElementById("number9").value;
		diy[9]=document.getElementById("number10").value;
		diy[10]=document.getElementById("number11").value;
		diy[11]=document.getElementById("number12").value;
		*/
		
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d")
		ctx.clearRect(0,0,700,400);
		var linedata = new Array(11);
		for(q=0;q<12;q++){
			linedata[q]=diyLine[q];
			}
		for(var i=0;i<12;i++){
			linedata[i]=110+Math.abs((linedata[i]-300)*0.9);
		}	
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		//横坐标轴点
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		ctx.beginPath();
		ctx.moveTo(75,linedata[0]);
		ctx.strokeStyle="blue";
		//1
		
		ctx.lineTo(120,linedata[1]);
		//2
		
		ctx.lineTo(165,linedata[2]);
		//3
		
		ctx.lineTo(210,linedata[3]);
		//4
		
		ctx.lineTo(255,linedata[4]);
		//5
		
		ctx.lineTo(300,linedata[5]);
		//6
		
		ctx.lineTo(345,linedata[6]);
		//7
		
		ctx.lineTo(390,linedata[7]);
		//8
		
		ctx.lineTo(435,linedata[8]);
		//9
		
		ctx.lineTo(480,linedata[9]);
		//10
		
		ctx.lineTo(525,linedata[10]);
		//11
		
		ctx.lineTo(570,linedata[11]);
		//12
		ctx.stroke();;
	}
	
	function randomdata(){
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d")
		ctx.clearRect(0,0,700,400);
		var linedata=new Array(11);
			for(q=0;q<12;q++){
				linedata[q]=Math.round(Math.random()*300);
			}
			//random数字为0~1之间，*60扩大60倍，+80说明从80开始
			for(var v=0;v<12;v++){
				d=v+1;
				document.getElementById("number"+d).value=linedata[v];
				}
			for(var i=0;i<12;i++){
				linedata[i]=110+Math.abs((linedata[i]-300)*0.9);
			}	
			
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		//横坐标轴点
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		ctx.beginPath();
		ctx.moveTo(75,linedata[0]);
		ctx.strokeStyle="blue";
		//1
		
		ctx.lineTo(120,linedata[1]);
		//2
		
		ctx.lineTo(165,linedata[2]);
		//3
		
		ctx.lineTo(210,linedata[3]);
		//4
		
		ctx.lineTo(255,linedata[4]);
		//5
		
		ctx.lineTo(300,linedata[5]);
		//6
		
		ctx.lineTo(345,linedata[6]);
		//7
		
		ctx.lineTo(390,linedata[7]);
		//8
		
		ctx.lineTo(435,linedata[8]);
		//9
		
		ctx.lineTo(480,linedata[9]);
		//10
		
		ctx.lineTo(525,linedata[10]);
		//11
		
		ctx.lineTo(570,linedata[11]);
		//12
		ctx.stroke();;
	}

	function startdrawline(){
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d")
		ctx.clearRect(0,0,700,400);

		                	// $link=mysql_connect(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
                
    	<?php
		// error_reporting(0);
		     if($link)
	                {
	                    mysql_select_db('ncqihang',$link);
	                    //your code goes here	
	                }
	                $sql ="SELECT data FROM CLine order by id asc";
	                $result = mysql_query($sql)
                        or die(SQL语句执行失败);



		    echo 'var linedata=[';
		    while($row =mysql_fetch_row($result))
		    {	
		        echo $row[0].',';
		            //echo 'var areadata=new Array('.$row[0].', '.$row[1].', '.$row[2].', '.$row[3].', '.$row[4].', '.$row[5].', '.$row[6].', '.$row[7].', '.$row[8].', '.$row[9].', '.$row[10].', '.$row[11].');';													
		    }
		    echo '0];';
		    mysql_free_result($result);
		    mysql_close();
		?>


		//var linedata=new Array(115,98,113,105,114,119,117,130,128,135,131,129);
		for(var v=0;v<12;v++){
				d=v+1;
				document.getElementById("number"+d).value=linedata[v];
		}
		for(var i=0;i<12;i++){
			linedata[i]=110+Math.abs((linedata[i]-300)*0.9);
		}	
		
			//110为纵轴最高标识点的纵坐标
			//140为最高标识点的数值
			//0.9为纵轴实际长度（270）/纵轴数值长度（300）
		ctx.beginPath();
		ctx.strokeStyle="black"; 
		ctx.lineWidth="2";
		ctx.moveTo(30,20);//纵坐标轴最高点
		ctx.lineTo(30,380);
		ctx.lineTo(620,380);//横坐标轴最高点
		ctx.stroke(); //横纵坐标轴
		
		//横坐标轴点
		ctx.beginPath();
		ctx.moveTo(75,380);
		ctx.lineTo(75,375);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(120,380);
		ctx.lineTo(120,375);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(165,380);
		ctx.lineTo(165,375);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(210,380);
		ctx.lineTo(210,375);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(255,380);
		ctx.lineTo(255,375);
		ctx.stroke();//5
		
		ctx.beginPath();
		ctx.moveTo(300,380);
		ctx.lineTo(300,375);
		ctx.stroke();//6
		
		ctx.beginPath();
		ctx.moveTo(345,380);
		ctx.lineTo(345,375);
		ctx.stroke();//7
		
		ctx.beginPath();
		ctx.moveTo(390,380);
		ctx.lineTo(390,375);
		ctx.stroke();//8
		
		ctx.beginPath();
		ctx.moveTo(435,380);
		ctx.lineTo(435,375);
		ctx.stroke();//9
		
		ctx.beginPath();
		ctx.moveTo(480,380);
		ctx.lineTo(480,375);
		ctx.stroke();//10
		
		ctx.beginPath();
		ctx.moveTo(525,380);
		ctx.lineTo(525,375);
		ctx.stroke();//11
		
		ctx.beginPath();
		ctx.moveTo(570,380);
		ctx.lineTo(570,375);
		ctx.stroke();//12
		
		//纵坐标轴点
		ctx.beginPath();
		ctx.moveTo(30,110);
		ctx.lineTo(35,110);
		ctx.stroke();//4
		
		ctx.beginPath();
		ctx.moveTo(30,200);
		ctx.lineTo(35,200);
		ctx.stroke();//3
		
		ctx.beginPath();
		ctx.moveTo(30,290);
		ctx.lineTo(35,290);
		ctx.stroke();//2
		
		ctx.beginPath();
		ctx.moveTo(30,380);
		ctx.lineTo(35,380);
		ctx.stroke();//1
		
		ctx.beginPath();
		ctx.moveTo(25,25);
		ctx.lineTo(30,20);
		ctx.lineTo(35,25);
		ctx.stroke();//纵坐标箭头
		
		ctx.beginPath();
		ctx.moveTo(615,375);
		ctx.lineTo(620,380);
		ctx.lineTo(615,385);
		ctx.stroke();//横坐标箭头
		

		ctx.shadowOffsetX=5;
		ctx.shadowOffsetY=8;
		ctx.shadowBlur=8;
		ctx.shadowColor="rgba(0,0,0,0.5)";
		//阴影效果
		
		
		//数据
		ctx.beginPath();
		ctx.moveTo(75,linedata[0]);
		ctx.strokeStyle="blue";
		//1
		
		ctx.lineTo(120,linedata[1]);
		//2
		
		ctx.lineTo(165,linedata[2]);
		//3
		
		ctx.lineTo(210,linedata[3]);
		//4
		
		ctx.lineTo(255,linedata[4]);
		//5
		
		ctx.lineTo(300,linedata[5]);
		//6
		
		ctx.lineTo(345,linedata[6]);
		//7
		
		ctx.lineTo(390,linedata[7]);
		//8
		
		ctx.lineTo(435,linedata[8]);
		//9
		
		ctx.lineTo(480,linedata[9]);
		//10
		
		ctx.lineTo(525,linedata[10]);
		//11
		
		ctx.lineTo(570,linedata[11]);
		//12
		ctx.stroke();
		}

 </script>
    
<body>
    <div id="canvas">
        <canvas id="myCanvas" width="700px" height="400px">
        </canvas>
        <div id="title" style="position:absolute;left:210px;top:0px;">
            	<h4>数据1-某学生一学年的数学成绩</h4>
                <h5 align="center">南城启航</h5>
            </div>
         <div id="point1" style="position:absolute;left:20px;top:90px;">
         		<h6>300</h6>
         </div>
         <div id="point2" style="position:absolute;left:20px;top:180px;">
         		<h6>200</h6>
         </div>
         <div id="point3" style="position:absolute;left:20px;top:270px;">
         		<h6>100</h6>
         </div>
         <div id="yuandian" style="position:absolute;left:20px;top:360px;">
         		<h6>&nbsp;0</h6>
         </div>
    </div>
    	<div id="form" style="display:none">
        <form method="post" action="Updata/UpLine_c.php" id="f1">
        <input type="number" id="sj1" name="sj1"/>
        <input type="number" id="sj2" name="sj2"/>
        <input type="number" id="sj3" name="sj3"/>
        <input type="number" id="sj4" name="sj4"/>
        <input type="number" id="sj5" name="sj5"/>
        <input type="number" id="sj6" name="sj6"/>
        <input type="number" id="sj7" name="sj7"/>
        <input type="number" id="sj8" name="sj8"/>
        <input type="number" id="sj9" name="sj9"/>
        <input type="number" id="sj10" name="sj10"/>
        <input type="number" id="sj11" name="sj11"/>
        <input type="number" id="sj12" name="sj12"/>
        </form>
        </div>
      
       
        <div>
        	<h2>Canvas线状图</h2>
        	<button onClick="startdrawline()"><font face="微软雅黑" size="+1">画图&原始数据</font></button>
            <button onClick="randomdata()"><font face="微软雅黑" size="+1">切换随机数据</font></button>
            <br>
            <br>
            
           
            <h4 align="center"><font face="微软雅黑">自定义数据</font></h4>
   
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onClick="diydrawLine();"><font face="微软雅黑" size="+1">绘制</font></button>
            <button onClick="diydrawLine();document.getElementById('f1').submit();"><font face="微软雅黑" size="+1">提交</font></button>
            <br>
            <br>
           		数据1：<input type="number" id="number1" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据2：<input type="number" id="number2" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据3：<input type="number" id="number3" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据4：<input type="number" id="number4" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据5：<input type="number" id="number5" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据6：<input type="number" id="number6" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据7：<input type="number" id="number7" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据8：<input type="number" id="number8" min="0" max="300" placeholder="0~300"/><br><br>
           		数据9：<input type="number" id="number9" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据10：<input type="number" id="number10" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据11：<input type="number" id="number11" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
           		数据12：<input type="number" id="number12" min="0" max="300" placeholder="0~300"/>&nbsp;&nbsp;
            <br><br>
            <a href="canvasColumn.php">Canvas柱状图</a>
            <a href="canvasArea.php">Canvas面积图</a>
            <a href="canvasPie.php">Canvas饼图</a>
            <a href="index.html">返回主页</a>
        </div>
</body>
</html>
